

import React, { useEffect } from 'react';
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([GridComponent, BarChart, CanvasRenderer]);

export default function Visuted() {
  useEffect(() => {
    const chartDom = document.getElementById('contexttwovisited');
    const myChart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [
            120,
            {
              value: 200,
              itemStyle: {
                color: '#a90000',
              },
            },
            150,
            80,
            70,
            110,
            130,
          ],
          type: 'bar',
        },
      ],
    };

    option && myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  }, []);
  return (
    <div style={{ textAlign: 'center', height: '2.5rem', width: '100%' }}>
      <div
        id="contexttwovisited"
        style={{ height: '100%', width: '100%' }}
      ></div>
    </div>
  );
}
